<template>
    <div id="tmpl">
        <div class="silder">
            <silder :imgs="imgs"></silder>
        </div>
        <div id="buy">
            <h4 v-text="info.title"></h4>
            <p class="line"></p>
            <ul>
                <li>
                    市场价:<s> ${{info.market_price}}</s>    销售价:<span> ${{info.sell_price}}</span>
                </li>
                <li class="inputli">
                    购买数量:<inputNumber @dataobj="getcount" class="inputnumber"></inputNumber>
                    <transition name="show" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
                        <div v-if="isshow" class="ball"></div>
                    </transition>
                    
                </li>
                <li>
                    <router-link to="/shopcar/car">
                    <mt-button type="danger" size="small">立即购买</mt-button></router-link>
                    <mt-button type="primary" size="small" @click="toshopcar">加入购物车</mt-button>
                </li>
            </ul>
            
        </div>

        <div id="params">
            <h6>商品参数</h6>
            <p class="line"></p>
            <ul>
                <li>商品货号: {{info.goods_no}}</li>
                <li>库存情况: {{info.stock_quantity}}</li>
                <li>上架时间: {{info.add_time|datefmt('YYYY-MM-DD HH:mm:ss')}}</li>
            </ul>
        </div>


        <div id="other">
            <router-link v-bind="{to:'/goods/goodsdesc/'+ this.id}">
            <mt-button class="imgdesc" type="primary" size="large" plain>图文详情</mt-button>
            </router-link>
            <router-link v-bind="{to:'/goods/goodsdescomment/'+ this.id}">
            <mt-button type="danger" size="large" plain>商品评论</mt-button>
            </router-link>
        </div>
    </div>
</template>

<script>

import silder from '../subcom/silder.vue';

import inputNumber from '../subcom/inputNumber.vue';

import con from '../../kits/common.js';

import {vm,COUNTSTR} from '../../kits/vm.js';

import {setItem,valueObj} from '../../kits/LocalStorage.js';

    export default {
        components:{
            silder,
            inputNumber
        },
        data(){
            return {
                id:0,           //商品ID 
                imgs:[
                        {
                        url: "http://www.baidu.com",
                        img: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554377581487&di=6ad0e25cc43a7d17df7f04fe698fa255&imgtype=0&src=http%3A%2F%2Fwww.mobileui.cn%2Fblog%2Fuploads%2F2014%2F01%2F134655e43.jpg"
                        },
                        {
                        url: "http://ai.baidu.com",
                        img: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554972286&di=26f788905d033f786a2a7d57c3932a2a&imgtype=jpg&er=1&src=http%3A%2F%2Fp0.so.qhimgs1.com%2Ft019f97d7110308466c.png"
                        },
                        {
                        url: "http://www.360.cn",
                        img: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554377552588&di=6e928cc4dc30cfc47d08f30a2f4bcd04&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F94a463d7f1b3ada712b42731877bf69c539be9ba268b6-Ryi6xn_fw658"
                        }
                ],
                info:{
                        "id":87,
                        "title":"HUAWEI 华为P8",
                        "add_time":"2019-04-11T13:29:49.000Z",
                        "goods_no":"SD9102356032",
                        "stock_quantity":60,
                        "market_price":2499,
                        "sell_price":2195
                    },
                inputNumberCount:1,
                isshow:false,
                
            }
        },
        created(){
            console.log(this.id)
            this.id = this.$route.params.id;
            this.getimgs();
            this.getinfo();
        },
        methods:{
            //动画3个方法
            beforeEnter(el){
                //设定小球的初始位置
                el.style.transform = "translate(0px,0px)";
            },
            enter(el,done){
                //保证小球出现动画
                el.offsetWidth;
                //设置小球的结束位置
                el.style.transform = "translate(75px,366px)";
                //结束动画
                done();
            },
            afterEnter(el){
                //重置小球的初始状态
                this.isshow = !this.isshow;
            },
            //加入购物车
            toshopcar(){
                //触发事件
                vm.$emit(COUNTSTR,this.inputNumberCount);
                //将数据保存到localStorage中
                valueObj.goodsid =  this.id;
                valueObj.count = this.inputNumberCount;
                setItem(valueObj);

                this.isshow = !this.isshow;
            },
            //获取商品详情描述
            getinfo(){

                var url = con.base + '/api/goods/getinfo/'+ this.id;
                this.$http.get(url).then(function(res){
                    if(res.body.status !=0){
                        Toast(res.body.message);
                        return;
                    }
                    this.info  = res.body.message[0];
                })
            },
            getimgs(){
                //var url = con.base + '/api/getthumimages/'+ this.id;
                var url = con.base + "/getArray";
                this.$http.get(url).then(function(res){
                    if(res.body.status !=0){
                        Toast(res.body.message);
                        return;
                    }
                    this.imgs  = res.body.message;
                })
            },
            //获取inputNumber组件中的传入的值
            getcount(count){
                this.inputNumberCount = count;
            }
        }
        
    }
</script>

<style scoped>
    .silder{
        border: 1px solid rgba(0, 0, 0, 0.4);
        border-radius: 5px;
        margin: 5px;
        margin-top: 45px;
    }
    #buy,#params,#other{
        margin: 5px;
        padding: 5px;
        border: 1px solid rgba(0, 0, 0, 0.4);
        border-radius: 5px;
    }
    #buy ul,#params ul{
        padding-left: 0px;
    }
    #buy h4{
        color:#0094ff;

    }
    #buy li,#params li{
        list-style: none;
        padding: 8px;
    }

    #buy  span{
        color:red;
    }

    #other .imgdesc{
        margin-bottom: 20px;
    }
    .inputnumber{
        position: absolute;
        left:100px;
        top: 5px;
    }

    .inputli{
        position: relative;
    }

    .ball{
        background-color: red;
        height: 20px;
        width: 20px;
        border-radius: 50%;
        position: absolute;
        left: 150px;
        top: 10px;
    /* 实现动画 */
        transition: all 0.4s ease;
    }
</style>

